//热门视频
const li = document.querySelector('.hot .bd ul li')
console.log(localStorage.getItem("token"));
axios({
  url:'http://localhost:8080/video',
  method:'get'
}).then(result => {
  const data = result.data.data
  data.sort((a,b) => b.clickNum-a.clickNum)
  const top5Items = data.slice(0, 5);// 输出前5项的对象数组
  const ul = document.querySelector('.bd ul');
  for (let index = 0; index < top5Items.length; index++) {
    const element = top5Items[index];
    const li = document.createElement('li'); 
    li.innerHTML = `
    <a href="shiping.html?name=${element.name}&album=${element.album}" target="_blank">
          <div class="pic">
              <img src="${element.cover}" alt="">
          </div>
          <div class="txt">
              <h4>${element.name}</h4>
              <p>
                  <span>播放量</span>
                  <i>${element.clickNum}</i>
              </p>
          </div>
      </a>
    `
    ul.appendChild(li)
  }  
}).catch(error => {
  console.error(error);
})

//我的视频
const li2 = document.querySelector('.myMV .bd ul li')
axios({
  url:'http://localhost:8080/private',
  method:'get',
}).then(result => {
  const data = result.data.data;
  data.sort((a,b) => b.clickNum-a.clickNum)
  const top5Items = data.slice(0, 5);// 输出前5项的对象数组
  const ul2 = document.querySelector('.myMV .bd ul');
  for (let index = 0; index < top5Items.length; index++) {
    const element = top5Items[index];
    const li2 = document.createElement('li'); 
    li2.innerHTML = `
    <a href="shiping2.html?videoName=${element.videoName}" target="_blank">
          <div class="pic">
              <img src="${element.cover}" alt="">
          </div>
          <div class="txt">
              <h4>${element.videoName}</h4>
              <p>
                  <span>播放量</span>
                  <i>${element.clickNum}</i>
              </p>
          </div>
      </a>
    `
    ul2.appendChild(li2)
  }  
}).catch(error => {
  console.error(error);
})


// 从 localStorage 中获取存储的数据
const storedUsername = localStorage.getItem('username');
const storedImage = localStorage.getItem('imageFile'); // 假设这里是存储的图片 base64 编码数据
const imgElement = document.querySelector('.user img');
imgElement.src = storedImage;
const spanElement = document.querySelector('.user span');
spanElement.textContent = storedUsername;


changeBacgoundImage()
//更换背景图
function changeBacgoundImage() {
  let images = ['../images/流行.jpeg','../images/摇滚.jpg', '../images/民谣.jpeg','../images/蓝调.jpeg','../images/爵士.jpg','../images/funk.jpg','../images/重金属.jpeg', '../images/古典.jpg','../images/fusion.jpg']; // 假设这是你要轮播的背景图片列表
  let currentIndex = 0;
  let bannerWrapper = document.querySelector('.banner .wrapper');
  function changeBannerBackground() {
    bannerWrapper.classList.add('fade-out'); // 添加fade-out类，使元素透明度变为0
    bannerWrapper.style.backgroundImage = `url('${images[currentIndex]}')`;
    bannerWrapper.classList.remove('fade-out'); // 移除fade-out类，使元素透明度恢复为1
    currentIndex = (currentIndex + 1) % images.length;// 等待0.5秒（与CSS中设置的transition时间相同），然后更新背景图片和透明度
  }
  changeBannerBackground();
  setInterval(changeBannerBackground, 5000);
}


//退出登录
const userA = document.querySelector('.user a');
userA.addEventListener("click", (e)=>{
  e.preventDefault();
  var confirmLogout = confirm("是否退出登录？");
  if (confirmLogout) {
    localStorage.clear();
    alert("已退出登录");
    setInterval(
      window.location.href = "denglu.html"
    )
  }
})

